/**
 * 事故原因
 */

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Input, Radio, Select } from 'antd';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import styles from './index.less';
import moment from 'moment';

import {
  accidentClose
} from '../service';
import { Const } from '../../Const';

const FormItem = Form.Item;
const Option = Select.Option;

const AccidentReason = props => {

  const { modalVisible, onCancel, form, onSubmit, accidentId, ownerType } = props;

  // 事故单结案
  const { run: runAccidentClose } = useRequest(params => accidentClose(params), {
    manual: true,
    onSuccess (res) {
      console.log(res, '事故单结案');
      onSubmit();
    }
  })

  // 确定
  const okHandle = useCallback(() => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      // form.resetFields();
      let obj = {
        ...fieldsValue,
        accidentId
      }
      runAccidentClose(obj);
    });
  }, [form, accidentId]);

  return (
    <Modal
      destroyOnClose
      title="请选择事故单原因"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={onCancel}
      maskClosable={false}
    >
      <FormItem {...Const.formLayout} label="事故单原因">
        {form.getFieldDecorator('accidentReason', {
          rules: [
            { required: true, message: '请选择事故单原因' }
          ],
          initialValue: ''
        })(
          <Select
            allowClear
            showSearch
            placeholder="请选择"
            style={{ width: '100%' }}>
            {Const.accidentReasonList.map((item, index) => {
              if (ownerType === 1 || ownerType === 7) {
                if (item.value === 13) {
                  return <Option key={item.value} value={item.value}>{item.label}</Option>
                }
              } else {
                return <Option key={item.value} value={item.value}>{item.label}</Option>
              }
            })}
          </Select>
        )}
      </FormItem>
      <FormItem {...Const.formLayout} label="责任航站">
        {form.getFieldDecorator('dutyTerminal', {
          rules: [
            { required: true, message: '请选择责任航站' }
          ],
          initialValue: ''
        })(
          <Radio.Group options={Const.dutyTerminalList}></Radio.Group>
        )}
      </FormItem>
    </Modal>
  )
};

export default Form.create()(AccidentReason);
